<template>
  <a-row type="flex" style="flex-flow: inherit;">
    <a-col flex="auto">
      <a-card :bordered="false" style="margin-bottom: 10px">
        <!-- 查询区域 -->
        <!-- 查询区域 -->
        <div class="table-page-search-wrapper" style="position: relative">
          <div class="search-wrapper-btn">
            <a-button type="link" @click="show = !show">
              <span v-if="!show">展开
                <a-icon type="down" />
              </span>
              <span v-else>收起
                <a-icon type="up" />
              </span>
            </a-button>
          </div>
          <a-form-model :label-col="labelCol" :wrapper-col="wrapperCol" @keyup.enter.native="onQuery">
            <div class="mode_item">
              <div class="mode_item_div mode_item_div1">
                <a-form-model-item label="门诊地区">
                  <z-linkage-area placeholder="请选择行政区划" v-model="pageFilter.clinicRegionArr"
                    @change="setAdminDivisions" />
                  <!-- <a-select v-model="pageFilter.clinicRegion" placeholder="请选择">
                    <a-select-option v-for="(item, index) in clinicInfo" :value="item" :key="index">
                      {{ item }}
                    </a-select-option>
                  </a-select> -->
                </a-form-model-item>
              </div>
              <div class="mode_item_div">
                <a-form-model-item label="门诊名称">
                  <a-select v-model="pageFilter.clinicName" placeholder="请选择" allowClear>
                    <a-select-option v-for="item in clinicNameArr" :key="item">{{ item }}
                    </a-select-option>
                  </a-select>
                  <!-- <a-input v-model="pageFilter.clinicName" placeholder="请输入" /> -->
                </a-form-model-item>
              </div>
            </div>
            <div class="mode_item" v-show="show">
              <div class="mode_item_div">
                <a-form-model-item label="病人编号">
                  <a-input v-model="pageFilter.patientId" placeholder="请输入" />
                </a-form-model-item>
              </div>
              <div class="mode_item_div mode_item_flex">
                <a-form-model-item label="服药状态">
                  <a-radio-group v-model="pageFilter.cureState" @change="onStatusChange">
                    <a-radio value="">全部</a-radio>
                    <a-radio value="0">按时</a-radio>
                    <a-radio value="1">脱失</a-radio>
                  </a-radio-group>
                </a-form-model-item>
              </div>
            </div>
            <div class="btnBox">
              <a-form-model-item :wrapper-col="{ offset: 0 }" style="margin-bottom: 0">
                <a-button type="primary" @click="onQuery"> 查询 </a-button>
                <a-button style="margin-left: 10px" @click="onResetForm"> 重置 </a-button>
              </a-form-model-item>
            </div>
          </a-form-model>
        </div>
      </a-card>
      <a-card :bordered="false">
        <!-- 操作按钮区域 -->
        <div class="table-operator">
          <!-- <a-button type="primary" @click="onAddGroup">新增入组</a-button> -->
          <!-- <a-button type="primary" @click="onTransfer">转诊</a-button>
          <a-button type="primary" @click="onLeave">退诊</a-button> -->
          <a-button type="primary" @click="onConfig">治疗脱失告警配置</a-button>
          <!--          <a-button @click="onOut()">导出</a-button>-->
        </div>
        <!-- 表格展示 -->
        <div class="table-page-content">
          <z-table ref="table" rowKey="id" :showAlert="false" :showSelection="false" :loading="loading"
            :columns="columns" :dataSource="pageData" @change="onTableChange">
            <template slot="cureState" slot-scope="text">
              <span v-if="text == '0'">按时</span>
              <span v-else class="red">脱失</span>
            </template>
            <!--操作-->
            <template slot="action" slot-scope="text, record">
              <a-button @click="onMedicine(record)" type="link" style="padding: 0">服药录入</a-button>
              <a-divider type="vertical" />
              <a-button @click="onTransfer(record)" type="link" style="padding: 0">转诊</a-button>
              <a-divider type="vertical" />
              <a-button @click="onLeave(record)" type="link" style="padding: 0">退诊</a-button>
              <a-divider type="vertical" />
              <a-button @click="onDetail(record)" type="link" style="padding: 0">详情</a-button>
            </template>
          </z-table>
        </div>
        <!-- <AddGroupModal ref="addGroupModalId" /> -->
        <ConfigModal ref="configModalId" />
        <TransferModal ref="transferModalId" />
        <LeaveModal ref="leaveModalId" />
        <MedicineModal ref="medicineModalId" />
      </a-card>
    </a-col>
  </a-row>
</template>

<script>
import * as treatApi from '@/api/sjsk/help/treat.js'
import ConfigModal from './modules/ConfigModal'
import TransferModal from './modules/TransferModal'
import LeaveModal from './modules/LeaveModal'
import MedicineModal from './modules/MedicineModal'
import DepartTree from '@/views/sjsk/modules/departTree'
import { downLoadFileReader } from '@/utils/export-util/util'
export default {
  components: {
    ConfigModal,
    TransferModal,
    LeaveModal,
    MedicineModal,
    DepartTree,
  },
  data() {
    return {
      labelCol: { span: 6 },
      wrapperCol: { span: 17 },
      show: false,
      loading: false,
      visible: false,
      reloading: false,
      treeDatas: [],
      toggle: true,
      columns: [
        {
          title: '序号',
          dataIndex: 'order',
          width: 60,
          align: 'center',
          customRender: (text, record, index) =>
            `${(this.pageFilter.pageNo - 1) * this.pageFilter.pageSize + (index + 1)}` //序号分页后连续
        },
        {
          title: '门诊名称',
          dataIndex: 'clinicName',
          align: 'center',
          // customRender: (text) => {
          //   return <j-ellipsis value={text} length={14} />
          // },
          display: 'none'
        },
        {
          title: '病人编号',
          dataIndex: 'patientId',
          align: 'center',
        },
        {
          title: '姓名',
          dataIndex: 'realName',
          align: 'center',
        },
        {
          title: '入组时间',
          dataIndex: 'groupTime',
          align: 'center',
        },
        {
          title: '服药次数',
          dataIndex: 'takeCureCount',
          align: 'center',
        },
        {
          title: '当前剂量',
          dataIndex: 'dose',
          align: 'center',
        },
        {
          title: '服药状态',
          dataIndex: 'cureState',
          align: 'center',
          scopedSlots: { customRender: 'cureState' },
        },
        {
          title: '最新服药时间',
          dataIndex: 'lastCureTime',
          align: 'center',
        },
        {
          title: '操作',
          width: 250,
          align: 'center',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' },
        },
      ],
      pageFilter: {
        pageNo: 1,
        pageSize: 10,
      },
      clinicNameArr: [],
      pageData: {},
      clinicInfo: []
    }
  },
  created() {
    this.allClinicInfo1();
  },
  async mounted() {
    this.onQuery()
  },

  methods: {
    // 获取行政区划的值
    setAdminDivisions(value) {
      // console.log("1111")
      this.pageFilter.clinicRegion = value.join()
      console.log(this.pageFilter.clinicRegion)
      treatApi.getClinicNameByRegion({ region: this.pageFilter.clinicRegion }).then((res) => {
        if (res.success) {
          if (res.result != null) {
            // this.pageFilter.clinicName = undefined
            this.clinicNameArr = res.result
          }
        }
      })
    },
    allClinicInfo1() {
      treatApi.allClinicRegion().then((res) => {
        if (res.success) {
          this.clinicInfo = res.result ? res.result : null;
          this.loading = false
          // this.$refs.table.onClearRowKeys()
        } else {
          this.loading = false
        }
      })
        .catch((e) => {
          this.loading = false
          this.$message.warn('请求失败！')
        })
    },
    onQuery() {
      this.pageFilter.pageNo = 1
      this.refreshTable()
    },
    onResetForm() {
      this.pageFilter = {
        pageNo: 1,
        pageSize: 10
      }
      this.refreshTable()
    },
    onTimeChange() {

    },
    onStatusChange() {

    },
    onTableChange(pagination, pageFilter, sorter) {
      let keyMap = { currentPage: 'pageNo' }
      let paginations = Object.keys(pagination).reduce((newData, key) => {
        let newKey = keyMap[key] || key
        newData[newKey] = pagination[key]
        return newData
      }, {})
      this.pageFilter = Object.assign({}, this.pageFilter, paginations)
      this.refreshTable()
    },
    refreshTable() {
      this.loading = true
      treatApi.personList(this.pageFilter).then((res) => {
        if (res.success) {
          this.pageData = res.result ? res.result : {}
          this.loading = false
          // this.$refs.table.onClearRowKeys()
        } else {
          this.loading = false
        }
      })
        .catch((e) => {
          this.loading = false
          this.$message.warn('请求失败！')
        })
    },
    onOut() {
      treatApi.exportGroupPersons().then(async res => {
        const fileName = '入组人员列表.xls'
        await downLoadFileReader(res, fileName)
      })
    },
    onAddGroup() {
      this.$refs.addGroupModalId.show()
    },
    onConfig() {
      this.$refs.configModalId.show()
    },
    onTransfer(record) {
      const record1 = { patientId: record.patientId, originClinic: record.clinicName, originRegion: record.clinicRegion }
      this.$refs.transferModalId.show(record1)
    },
    onLeave(record) {
      this.$refs.leaveModalId.show(record)
    },
    onMedicine(record) {
      this.$refs.medicineModalId.show(record.patientId)
      // this.$refs.medicineModalId.show(record.patientId)
    },
    onDetail(record) {
      this.$router.push({
        path: "/treat/personnelRecord",
        query: {
          id: record.id,
          patientId: record.patientId,
          realName: record.realName,
          originRegion: record.clinicRegion,
          originClinic: record.clinicName,
          groupTime: record.groupTime,
          aKey: '1'
        }
      })
    },
    /** 重新加载组件 */
    reload() {
      this.reloading = true
      this.$nextTick(() => (this.reloading = false))
    },
    getTreeData(datas) {
      console.log(datas, id)
      console.log(id)
    },
    toggleBool(bool) {
      console.log(bool)
      this.toggle = bool
    }
  },
}
</script>
<style lang="less" scoped>
.mode_item {
  display: flex;
  border-bottom: 1px #dadada dashed;

  .mode_item_div {
    width: 26%;
    padding: 5px 0;

    .ant-form-item {
      margin-bottom: 0;
    }
  }
  .mode_item_div1 {
      width: 56%;

      /deep/.ant-col-17 {
        width: 86%;
      }

      /deep/.ant-col-6 {
        width: 12%;
      }
    }
  &>* {
    width: 100%;
    margin-bottom: 0;
    padding: 10px 0;
  }
}

.mode_item_flex {
  width: 70% !important;

  /deep/ .ant-col-6 {
    width: 9.5% !important;
  }
}

.search-wrapper-btn {
  position: absolute;
  right: 12%;
  top: 9px;
  z-index: 100;
}

.btnBox {
  position: absolute;
  right: 0;
  top: 5px;
  z-index: 120;
}

.red {
  color: red
}

@import '~@assets/less/common.less';
</style>
